<template>
  <!--使用draggable组件-->
  <draggable v-model="tableCols" animation="1000" @start="onStart" @end="onEnd">
    <transition-group style="display: flex; ">
      <div style="margin-left: 2rem; width: 15rem;" class="item" v-for="element in tableCols" :key="element.prop">
        {{ element.label }}
        <div>111</div>
      </div>
    </transition-group>
  </draggable>
</template>
<script>
//导入draggable组件
import draggable from 'vuedraggable'
export default {
  //注册draggable组件
  components: {
    draggable,
  },
  data() {
    return {
      drag: false,
      tableCols: [
        {
          label: "鱼池编码",
          prop: "fishpondCode",
          align: "center",
        },
        {
          label: "鱼池名称",
          prop: "fishpondName",
          align: "center",
        },
        {
          label: "鱼名",
          prop: "fishName",
          align: "center",
        },
        {
          label: "鱼编码",
          prop: "fishCode",
          align: "center",
        },
        {
          label: "批次编码",
          prop: "batchCode",
          align: "center",
        },
        {
          label: "性别",
          slot: "sex",
          align: "center",
        },
        {
          label: "卵径",
          prop: "diameter",
          align: "center",
        },
        {
          label: "条数",
          prop: "num",
          align: "center",
        },
        {
          label: "初重",
          prop: "weightPrime",
          align: "center",
        },
        {
          label: "均重",
          prop: "weightAve",
          align: "center",
        },
        {
          label: "总重",
          prop: "weight",
          align: "center",
        },
        {
          label: "单价",
          prop: "iprice",
          align: "center",
        },
        {
          label: "金额",
          prop: "isum",
          align: "center",
        },
        {
          label: "原采购价",
          prop: "reiprice",
          align: "center",
        },
        {
          label: "原采购金额",
          prop: "reisum",
          align: "center",
          width: "90",
        },
        {
          label: "操作",
          slot: "operation",
          align: "center",
          width: "120",
          fixed: "right",
        },
      ],
      //定义要被拖拽对象的数组
      myArray: [
        { people: 'cn', id: 1, name: 'www.itxst.com' },
        { people: 'cn', id: 2, name: 'www.baidu.com' },
        { people: 'cn', id: 3, name: 'www.taobao.com' },
        { people: 'us', id: 4, name: 'www.google.com' }
      ]
    };
  },
  methods: {
    //开始拖拽事件
    onStart() {
      this.drag = true;
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false;
      console.log(this.myArray);
    },
  },
};
</script>